import React, { useState, useEffect } from 'react';
import './q_ding.css';
import { useNavigate } from "react-router-dom";
import { LeftOutline } from 'antd-mobile-icons';
import axios from 'axios';

function qjx_ding() {
    const navigate = useNavigate();
    const [activeIndex, setActiveIndex] = useState(0);
    const [list, setList] = useState([]);
    const [displayData, setDisplayData] = useState([]);
    const [isLoading, setIsLoading] = useState(true); 
    const [error, setError] = useState(null); 

    const tabs = ['全部', '待付款', '待收货', '已完成', '已取消'];

    const getList = () => {
        axios.get('http://127.0.0.1:3000/chen_getlist')
          .then(res => {
                setList(res.data.data);
                setIsLoading(false); 
            })
          .catch(err => {
                setError(err); 
                setIsLoading(false); 
            });
    };

    const getRandomFive = () => {
        if (list.length <= 5) {
            return list;
        }
        const shuffled = [...list].sort(() => 0.5 - Math.random());
        return shuffled.slice(0, 5);
    };

    const handleTabClick = (index) => {
        setActiveIndex(index);
        const data = index === 0 ? list : getRandomFive();
        setDisplayData(data);
    };

    useEffect(() => {
        getList();
        handleTabClick(0);
    }, []);

    // 随机选择两个标签的函数
    const getRandomTags = () => {
        const allTags = ['支付', '取消', '退款', '待付款'];
        const selectedTags = [];
        const tagIndices = new Set();
        while (tagIndices.size < 2) {
            const randomIndex = Math.floor(Math.random() * allTags.length);
            tagIndices.add(randomIndex);
        }
        tagIndices.forEach(index => {
            selectedTags.push(allTags[index]);
        });
        return selectedTags;
    };

    return (
        <div>
            <div className='y_one'>
                <p style={{ marginTop: '3px' }} onClick={() => navigate('/home/mind')}>
                    <LeftOutline fontSize={24} />
                </p>
                <h2>商城订单</h2>
            </div>
            <div className="tab-container">
                {tabs.map((tab, index) => (
                    <div className='qq_o'>
                        <span
                            key={index}
                            className={`tab-item ${activeIndex === index ? 'activeq' : ''}`}
                            onClick={() => handleTabClick(index)}
                        >
                            {tab}
                        </span>
                    </div>
                ))}
            </div>
            <div className="data-container">
                {isLoading && <p>加载中...</p>}
                {error && <p>数据加载失败: {error.message}</p>}
                {!isLoading && !error && displayData.length === 0 && <p>暂无数据</p>}
                {!isLoading && !error && displayData.length > 0 && (
                    <ul className="order-list">
                        {displayData.map((item, idx) => {
                            const randomTags = getRandomTags();
                            return (
                                <li key={idx} className="order-item">
                                    <div className="order-item-img">
                                        <img src={item.img} alt={item.name} style={{ width: '100px', height: '100px' }} />
                                    </div>
                                    <div className="order-item-info">
                                        <p>商品名称: {item.name}</p>
                                        <p>原价: {item.yprice}</p>
                                        <p>现价: {item.xprice}</p>
                                        <p>已售数量: {item.yishou}</p>
                                        <div className="tag-container">
                                            {randomTags.map((tag, tagIndex) => (
                                                <span key={tagIndex} className="tag-item">
                                                    {tag}
                                                </span>
                                            ))}
                                        </div>
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                )}
            </div>
        </div>
    );
}

export default qjx_ding;